<template>
  <div class="w-full h-full flex">
    <div class="flex-1">
      <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <section class="bg-gray-50 dark:bg-gray-900" v-if="!showRegister">
          <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
            <a class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
              welcome !!!
            </a>
            <div
                class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
              <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1
                    class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                  登陆
                </h1>
                <div class="space-y-4 md:space-y-6">
                  <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                      用户名
                    </label>
                    <input v-model="username" name="username" id="username_login"
                           class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           placeholder="username" required="">
                  </div>
                  <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码
                    </label>
                    <input v-model="password" type="password" name="password" id="password_login"
                           placeholder="••••••••"
                           class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           required="">
                  </div>
                  <button @click="() => { LogIn() }" class="w-full text-white  bg-blue-600 hover:bg-blue-700 focus:ring-4
                                    focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm
                                    px-5 py-2.5 text-center
                                     dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                    登录
                  </button>
                  <p class="text-sm font-light text-gray-500 dark:text-gray-400">
                    没有账号？ <a @click="() => { showRegister = !showRegister }"
                                 class="font-medium text-primary-600 hover:underline dark:text-primary-500">
                    去注册
                  </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </transition>
    </div>
    <div class="flex-1">
      <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <section class="bg-gray-50 dark:bg-gray-900" v-if="showRegister">
          <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
            <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
              welcome !!!
            </a>
            <div
                class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
              <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1
                    class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                  创建账号
                </h1>
                <div class="space-y-4 md:space-y-6">
                  <div>
                    <label for="email"
                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                      邮箱
                    </label>
                    <input v-model="email" type="email" name="email" id="email"
                           class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           placeholder="name@company.com" required="">
                  </div>
                  <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                      用户名
                    </label>
                    <input v-model="username"
                           class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           placeholder="username" required="">
                  </div>
                  <div>
                    <label for="password"
                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
                    <input type="password" name="password" id="password" placeholder="••••••••"
                           class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           required="" v-model="password">
                  </div>
                  <div>
                    <label for="confirm-password"
                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
                    <input type="password" name="confirm-password" id="confirm-password"
                           placeholder="••••••••"
                           class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                           required="" v-model="confirmaPassword">
                  </div>
                  <button @click="() => { createUser() }"
                          class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                    注册账号
                  </button>
                  <p class="text-sm font-light text-gray-500 dark:text-gray-400">
                    已有账号？ <a @click="() => { showRegister = !showRegister }"
                                 class="font-medium text-primary-600 hover:underline dark:text-primary-500">
                    登陆
                  </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </transition>
    </div>
  </div>
</template>

<script setup>
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter()
import {login,register} from "@/boot/user.js";
const showRegister = ref(false)
const username = ref('')
const password = ref('')
const email = ref('')
const confirmaPassword = ref('')
const LogIn = () => {
  login({username:username.value,password:password.value}).then(res=>{
    if(res.data.code === 200){
      localStorage.setItem('userId',res.data.data.id)
      localStorage.setItem('username',res.data.data.username)
      ElMessage.success('登录成功')
      router.push('/home')
    }else{
      ElMessage.error('登录失败')
    }
  })
}
const createUser = ()=>{
  if(password.value !== confirmaPassword.value){
    ElMessage.error('两次密码不一致')
    return
  }
  register({username:username.value,password:password.value,tel:email.value,role:'用户'}).then(res=>{
    if(res.data.code === 200){
      ElMessage.success('注册成功')
      showRegister.value = false
    }else{
      ElMessage.error('注册失败')
    }
  })
}

</script>